<template>
	<view class="wrap">
		<view class="content">
			<u--form
					labelPosition="left"
					:model="loginForm"
					:rules="rules"
					errorType="message"
					ref="uForm">
				<u-form-item prop="password">
					<u-input type="password" v-model="loginForm.password" placeholder="请填写新密码"/>
				</u-form-item>
				<u-form-item prop="rePassword">
					<u-input type="password" v-model="loginForm.rePassword" placeholder="请重复填写新密码"/>
				</u-form-item>
				<u-form-item prop="code" v-if="captchaEnabled">
					<u-row gutter="10">
						<u-col span="5">
							<u-input v-model="loginForm.code" placeholder="请输入验证码"/>
						</u-col>
						<u-col span="7">
							<u--image :showLoading="true" :src="codeUrl" width="115px" height="38px" @click="getCode"></u--image>
						</u-col>
					</u-row>
				</u-form-item>
			</u--form>
			<view class="u-m-t-20 u-p-20">
				<u-button @click="submit" type="warning">确定</u-button>
			</view>
		</view>
	</view>
</template>

<script>
	import { getCodeImg } from '@/api/login/login'
	import { updateUserPwd } from '@/api/sr/user'
	import { toast } from '@/utils/common'
	export default {
		data() {
			return {
				codeUrl: "",
				captchaEnabled:true,
				loginForm: {
					password: "",
					rePassword: "",
					code: "",
					uuid: ''
				},
				rules: {
					password: [
						{
							required: true,
							message: '请填写新密码',
							trigger: ['blur'],
						},
						{
							// 自定义验证函数，见上说明
							validator: (rule, value, callback) => {
								// 上面有说，返回true表示校验通过，返回false表示不通过
								// uni.$u.test.mobile()就是返回true或者false的
								return uni.$u.test.rangeLength(value, [6, 10]);
							},
							message: '密码位数为8位到10之间',
							// 触发器可以同时用blur和change
							trigger: ['blur'],
						}
					],
					rePassword: [
						{
							required: true,
							message: '请重复填写新密码',
							trigger: ['blur'],
						},
						{
							// 自定义验证函数，见上说明
							validator: (rule, value, callback) => {
								// 上面有说，返回true表示校验通过，返回false表示不通过
								// uni.$u.test.mobile()就是返回true或者false的
								return uni.$u.test.rangeLength(value, [6, 10]);
							},
							message: '密码位数为8位到10之间',
							// 触发器可以同时用blur和change
							trigger: ['blur'],
						},
						{
							// 自定义验证函数，见上说明
							validator: (rule, value, callback) => {
								// 上面有说，返回true表示校验通过，返回false表示不通过
								// uni.$u.test.mobile()就是返回true或者false的
								return this.loginForm.password === value;
							},
							message: '两次输入的密码不一致',
							// 触发器可以同时用blur和change
							trigger: ['blur'],
						}
					],
					code:{
						type: 'string',
						required: true,
						max: 4,
						message: '请填写4位验证码',
						trigger: ['blur']
					},
				},
				smsCodeDisabled: false,
				nums:60,
				clock:undefined
			}
		},
		computed: {

		},
		created() {
			this.getCode()
		},
		methods: {
			// 获取图形验证码
			getCode() {
				getCodeImg().then(res => {
					this.captchaEnabled = res.captchaEnabled === undefined ? true : res.captchaEnabled
					if (this.captchaEnabled) {
						this.codeUrl = 'data:image/gif;base64,' + res.data.img
						this.loginForm.uuid = res.data.uuid
					}
				}).catch((err) => {
				});
			},
			submit() {
				this.$refs.uForm.validate().then(res => {
					if (this.password != this.rePassword) {
						toast('前后密码不一致');
						return;
					}
					updateUserPwd(this.loginForm).then(response => {
						this.$modal.msgSuccess("修改成功")
						uni.navigateBack()
					}).catch(errors => {
					})
				}).catch(errors => {
					toast('校验失败')
				})
			}, 
			goPage(url) {
				this.$tab.navigateTo(url)
			}
		},
		onReady() {
			//如果需要兼容微信小程序，并且校验规则中含有方法等，只能通过setRules方法设置规则。
			this.$refs.uForm.setRules(this.rules)
		},
	};
</script>

<style lang="scss" scoped>
	page {
		background-color: #ffffff;
	}
	.wrap {
		font-size: 28rpx;
		.content {
			width: 600rpx;
			margin: 0rpx auto;
			padding-top: 80rpx;
			.title {
				text-align: left;
				font-size: 60rpx;
				font-weight: 500;
				margin-bottom: 100rpx;
			}
			input {
				text-align: left;
				margin-bottom: 10rpx;
				padding-bottom: 6rpx;
			}
			.tips {
				color: $u-info;
				margin-bottom: 60rpx;
				margin-top: 8rpx;
			}
			.getSmsCode {
				margin-top: 30rpx;
				background-color: rgb(253, 243, 208);
				color: $u-tips-color;
				border: none;
				font-size: 30rpx;
				padding: 12rpx 0;
				&::after {
					border: none;
				}
			}
			.alternative {
				color: $u-tips-color;
				display: flex;
				justify-content: space-between;
				margin-top: 30rpx;
			}
		}
		.bottom {
			position: absolute;
			bottom: 120rpx;
			.hint {
				padding: 20rpx 40rpx;
				font-size: 20rpx;
				color: $u-tips-color;
				.link {
					color: $u-warning;
				}
			}
		}
	}
</style>
